{% extends "sproutforms/_layout" %}

{% block content %}

<h1>Output your form using Custom HTML.</h1>

<p>Take a look at the code of this template to see an example with comments.</p>

<hr> 

{# Prepare our error macro #}
{% macro errorList(errors) %}
	{# To display errors, you want to make sure errors exist, 
		 and then you can loop through and display them #}
	{% if errors %}
			<ul class="errors">
					{% for error in errors %}
							<li>{{ error }}</li>
					{% endfor %}
			</ul>
	{% endif %}
{% endmacro %}

{% from _self import errorList %}


<form method="post" accept-charset="UTF-8">
	{{ getCsrfInput() }}
	<input type="hidden" name="action" value="sproutForms/entries/saveEntry">
	<input type="hidden" name="handle" value="basic">
	
	<div class="fields">
		
		<div class="field" id="fields-plainText-field">
			<div class="heading">
				<label class="required" for="fields-plainText">
					Plain Text Field
				</label>
			</div>
			<div class="input">
				<input class="text nicetext fullwidth" type="text" id="fields-plainText" name="fields[plainText]" {%- if basic is defined %}value="{{ basic.plainText }}"{% endif -%}>
			</div>
			{% if basic is defined %}
			<div class="error">
				{{ errorList(basic.getErrors('plainText')) }}
			</div>
			{% endif %}
		</div>


		{# @TODO - add examples for retaining values below #}

		<div class="field" id="fields-dropdown-field">
			<div class="heading">
				<label class="required" for="fields-dropdown">
					Dropdown Field
				</label>
			</div>
			<div class="input">
				<div class="select">
					<select name="fields[dropdown]">
						<option value="">Select...</option>
						<option value="option1">Option 1</option>
						<option value="option2">Option 2</option>
						<option value="option3">Option 3</option>
					</select>
				</div>
			</div>
			{% if basic is defined %}
			<div class="error">
				{{ errorList(basic.getErrors('dropdown')) }}
			</div>
			{% endif %}
		</div>

		<div class="field" id="fields-number-field">
			<div class="heading">
				<label for="fields-number">
					Number Field
				</label>
			</div>
			<div class="input">
				<input class="text" type="text" id="fields-number" size="5" name="fields[number]">
			</div>
		</div>

		<div class="field" id="fields-radioButtons-field">
			<div class="heading">
				<label for="fields-radioButtons">
					Radio Buttons Field
				</label>
			</div>
			<div class="input">
				<div>
					<label>
						<input type="radio" value="option1" id="" name="fields[radioButtons]"> Option 1
					</label>
				</div>
				<div>
					<label>
						<input type="radio" value="option2" id="" name="fields[radioButtons]"> Option 2
					</label>
				</div>
				<div>
					<label>
						<input type="radio" value="option3" id="" name="fields[radioButtons]"> Option 3
					</label>
				</div>
			</div>
		</div>

		<div class="field" id="fields-checkboxes-field">
			<div class="heading">
				<label for="fields-checkboxes">
					Checkboxes Field
				</label>
			</div>
			<div class="input">
				<div class="checkbox-select"><div>
					<label><input type="checkbox" value="option1" class="checkbox" name="fields[checkboxes][]">&nbsp;Option 1</label>
				</div>
				<div>
					<label><input type="checkbox" value="option2" class="checkbox" name="fields[checkboxes][]">&nbsp;Option 2</label>
				</div>
				<div>
					<label><input type="checkbox" value="option3" class="checkbox" name="fields[checkboxes][]">&nbsp;Option 3</label>		</div>
				</div>
			</div>
		</div>
		
		<div class="field" id="fields-multiSelect-field">
			<div class="heading">
				<label for="fields-multiSelect">
					Multi-select Field
				</label>
			</div>
			<div class="input">
				<select multiple="" name="fields[multiSelect][]">
					<option value="option1">Option 1</option>
					<option value="option2">Option 2</option>
					<option value="option3">Option 3</option>
				</select>
			</div>
		</div>

		<div class="field" id="fields-textarea-field">
			<div class="heading">
				<label for="fields-textarea">
					Textarea Field
				</label>
			</div>
			<div class="input">
				<textarea class="text nicetext fullwidth" rows="4" cols="50" id="fields-textarea" name="fields[textarea]"></textarea>
			</div>
		</div>

	</div>

	<div class="submit">
		<input type="submit" value="Submit">
	</div>
	
</form>

{% endblock %}